<template>
  <basic-container>
    <div class="seal-verify-title">
      <h1>印章防伪校验</h1>
    </div>
<!--  ***************************校验表单***************************  -->
    <div v-show="result === 0" class="seal-verify">
      <el-form
          style="margin: 100px 60px"
          ref="antiFakeFormRef"
          :model="antiFakeForm"
          :rules="antiFakeFormRules"
          label-width="auto"
          status-icon>
        <el-form-item label="电子印章" prop="antiFakePath">
          <el-upload
              class="avatar-uploader"
              action="/api/uploadFile"
              :on-success="handleFileSuccess"
              :before-upload="beforeUpload"
              name="myFile"
              :show-file-list="false"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 150px"/>
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="防伪识别码" prop="antiFakePassword">
          <el-input
              placeholder="请输入印章四位防伪识别码"
              style="width: 220px;"
              v-model.number="antiFakeForm.antiFakePassword"
              maxlength="4"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="FolderChecked" size="large" @click="verifySeal">校 验</el-button>
        </el-form-item>
      </el-form>
      <div class="seal-verify-right">
        <img src="../../img/verify/seal-verify.png">
      </div>
    </div>
<!--  ***************************校验错误***************************  -->
    <div v-if="result === 1">
      <el-result
          icon="error"
          title="校验错误"
          sub-title="请上传由本系统导出的防伪电子印章！"
      >
        <template #extra>
          <el-button type="primary" @click="result = 0">返回</el-button>
        </template>
      </el-result>
    </div>
 <!--  ***************************校验成功***************************  -->
      <div v-else-if="result === 2">
<!--        <el-result-->
<!--            icon="success"-->
<!--            title="校验成功"-->
<!--        >-->
<!--          <template #extra>-->
<!--            <div class="main">-->
<!--              <div class="task">-->
<!--                <h2 style="font-weight: 400">防伪电子印章概要</h2>-->
<!--                <table class="task_box">-->
<!--                  <tr align="left">-->
<!--                    <td>编号：{{sealDetail.antiFakeSealId}}</td>-->
<!--                    <td>名称：{{sealDetail.sealCon.sealName}}</td>-->
<!--                  </tr>-->
<!--                  <tr align="left">-->
<!--                    <td>导出人：{{sealDetail.antiFakeUser}}</td>-->
<!--                    <td>导出时间：{{sealDetail.antiFakeTime}}</td>-->
<!--                  </tr>-->
<!--                  <tr align="left">-->
<!--                    <td colspan="2">导出说明：{{sealDetail.antiFakeIntroduction}}</td>-->
<!--                  </tr>-->
<!--                </table>-->
<!--              </div>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-result>-->
        <div>
          <div class="resultTitle">印章验证完成</div>
          <div class="contractInfo noModify">
            <div class="contractInfoTitle">
              <div class="titleLine"></div>
              <div class="contractInfoTitleText">电子印章信息</div>
            </div>
            <!-- 合同信息 -->
            <div class="contractInfoContent">
              <div class="contractInfoContentItem">
                <div class="contractInfoContentItemLabel">文件名称：</div>
                <div class="contractInfoContentItemValue">{{fileName}}</div>
              </div>
              <div class="contractInfoContentItem">
                <div class="contractInfoContentItemLabel">文件大小：</div>
                <div class="contractInfoContentItemValue">{{fileSize}}</div>
              </div>
            </div>
          </div>
          <!-- 校验结果信息 -->
          <div class="checkContent">
            <div class="checkContentTitle">
              <div class="titleLine"></div>
              <div class="checkContentTitleDescription">防伪电子印章概要</div>
            </div>
            <div class="checkContentItemBox">
              <!--        下面这个checkContentItem里面写for-->
              <div class="checkContentItem">
                <div class="checkContentItemLeft">
                  <div class="checkContentItemLeftDescriptionItem">
                    <div class="checkContentItemLeftDescriptionItemLabel">印章编号：</div>
                    <div class="checkContentItemLeftDescriptionItemValue">{{sealDetail.antiFakeSealId}}</div>
                  </div>
                  <div class="checkContentItemLeftDescriptionItem">
                    <div class="checkContentItemLeftDescriptionItemLabel">印章名称：</div>
                    <div class="checkContentItemLeftDescriptionItemValue">{{sealDetail.sealCon.sealName}}</div>
                  </div>
                  <div class="checkContentItemLeftDescriptionItem">
                    <div class="checkContentItemLeftDescriptionItemLabel">导出人：</div>
                    <div class="checkContentItemLeftDescriptionItemValue">{{sealDetail.antiFakeUser}}</div>
                  </div>
                  <div class="checkContentItemLeftDescriptionItem">
                    <div class="checkContentItemLeftDescriptionItemLabel">导出时间：</div>
                    <div class="checkContentItemLeftDescriptionItemValue">{{sealDetail.antiFakeTime}}</div>
                  </div>
                  <div class="checkContentItemLeftDescriptionItem">
                    <div class="checkContentItemLeftDescriptionItemLabel">导出说明：</div>
                    <div class="checkContentItemLeftDescriptionItemValue">{{sealDetail.antiFakeIntroduction}}</div>
                  </div>
                </div>
                <div class="checkContentItemRight">
                  <div class="checkContentItemRightResult">
                    <div class="icon"><el-icon><CircleCheck /></el-icon></div>
                    <div class="checkContentItemRightResultDescription">印章有效</div>
                  </div>
                  <div class="checkContentItemRightResult">
                    <div class="icon"><el-icon><CircleCheck /></el-icon></div>
                    <div class="checkContentItemRightResultDescription">该印章为本系统导出的防伪电子印章</div>
                  </div>
                  <div class="checkContentItemRightSignature">
                    <img :src="sealDetail.sealCon.sealPath">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="btn-group">
            <el-button class="return-btn" @click="result = 0">返回</el-button>
          </div>
        </div>
      </div>
  </basic-container>
</template>

<script setup>
import {ref, getCurrentInstance} from 'vue';
import {ElMessage} from 'element-plus';
import {useStore} from 'vuex';
import {verifySealApi} from '../../api/sealAntiFake';
import {dateFormat, diskSize} from '../../utils/util';
const {proxy} = getCurrentInstance()


let result = ref(0)

const imageUrl = ref('')

const fileName = ref("")
const fileSize = ref("")
/**
 * 上传文件前校验
 */
const beforeUpload = (file) => {
  fileName.value = file.name
  fileSize.value = diskSize(file.size)
  if(file.type !== "image/png"){
    ElMessage.error("请上传png格式的电子印章！")
    return false
  }else if (file.size / 1024 / 1024 > 10) {
    ElMessage.error('上传文件大小不能超过10MB!')
    return false
  }
  return true
}

const handleFileSuccess = (res, file) => {
  imageUrl.value = res
}


/**
 * 防伪电子印章校验表单
 */
const antiFakeForm = ref({
  antiFakeUser: '',
  antiFakePassword: '',
  antiFakePath: ''
})
const antiFakeFormRef = ref(null)
const antiFakeFormRules = ref({
  antiFakePath: [{required: true,message: '请上传电子印章图片',trigger: 'blur'}],
  antiFakePassword: [{required: true,message: '请输入防伪识别码',trigger: 'blur'},
    { type: 'number', message: '请输入4位数字' }],
})

/**
 * 识别印章的详情
 */
const sealDetail = ref({})

const store = useStore()
const verifySeal = () => {
  antiFakeForm.value.antiFakeUser = store.getters.userId
  antiFakeForm.value.antiFakePath = imageUrl.value
  antiFakeFormRef.value.validate(valid =>{
    if(valid){
      verifySealApi(antiFakeForm.value)
      .then(res=>{
        let data = res.data.result
        imageUrl.value = ""
        antiFakeFormRef.value.resetFields()
        if(data === "passwordError"){
          ElMessage.error("防伪识别码错误，请重试！")
        }else if(data === "userError"){
          ElMessage.error("该账号与印章导出账号不同，请选择正确的账号校验！")
        }else if(data === "error"){
          ElMessage.error("校验错误，请上传正确的电子印章！")
          result.value = 1
        }else {
          ElMessage.success("校验成功！")
          console.log(data)
          data.antiFakeTime = dateFormat("YYYY-mm-dd HH:MM:SS",new Date(data.antiFakeTime))
          result.value = 2
          sealDetail.value = data
        }
        }).catch(res=>{
          ElMessage.error(res)
       })
    }
  })
}

</script>

<style scoped>
/deep/ .el-card__body{
  padding: 30px 60px;
  min-height: 71vh;
  background-color: #ffffff;
}
.seal-verify-title{
  border-bottom: 1px solid #e4e4e4;
}
.seal-verify-title h1{
  font-size: 28px;
  font-weight: 600;
  color: #202640;
  margin: 16px;
}
.seal-verify{
  display: flex;
}
/deep/ .el-form-item{
  margin-bottom: 26px;
  font-size: 16px;
}
.seal-verify-right{
  margin-top: 60px;
  margin-left: 50px;
}
.seal-verify-right img{
  width: 600px;
}
.avatar-uploader{
  border: 1px dashed #d9d9d9;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  text-align: center;
}

.main{
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px 100px 85px 100px;
  border-bottom: 1px solid #eee;
}

.task{
  width: 700px;
  border: 1px solid #eee;
  padding: 20px;
  font-size: 12px;
  margin-bottom: 30px;
}

.task_box{
  width: 700px;
  border-left: 1px solid #eee;
  border-top: 1px solid #eee;
  margin-top: 15px
}

.task_box tr td{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  padding: 10px 18px;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
/deep/ .el-button--primary{
  border-radius: 0;
  width: 156px;
  font-size: 16px;
  font-weight: 400;
  background-color: #1063f1;
  border-color: #1063f1;
}

/deep/ .el-card__body{
  padding: 30px 60px;
  min-height: 71vh;
  background-color: #ffffff;
}
.resultTitle{
  font-size: 30px;
  font-weight: 600;
  color: #202640;
  line-height: 42px;
  margin: 28px 0;
  padding-bottom: 20px;
  text-align: center;
}

.contractInfo {
  margin: 10px 0;
  padding-bottom: 23px;
  border: 0px solid #e4e4e4;
  border-bottom-width: 1.5px;
}
.noModify {
  background: url('../../img/verify/verify-success.svg') no-repeat left 310px top 0 / 140px;
}
.contractInfoTitle {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  margin: 0 40px 16px;
}
.titleLine {
  width: 4px;
  height: 16px;
  background: #e61717;
  margin-right: 8px;
}
.contractInfoTitleText{
  height: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #202640;
  line-height: 30px;
}
.contractInfoContent {
  margin: 0 40px;
}
.contractInfoContentItem{
  display: flex;
  align-items: center;
}
.contractInfoContentItem .contractInfoContentItemLabel{
  width: 170px;
  font-size: 14px;
  font-weight: 400;
  color: #202640;
  line-height: 30px;
  flex: none;
}
.contractInfoContentItem .contractInfoContentItemValue{
  font-size: 14px;
  color: #333;
}
.checkContent {
  padding: 40px 40px;
}
.checkContentTitle{
  display: flex;
  align-items: center;
}
.checkContentTitleDescription {
  height: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #202640;
  line-height: 30px;
}
.checkContent .checkContentItem:first-child {
  padding-top: 0px;
}
.checkContent .checkContentItem {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 40px;
  border: 0px solid #e4e4e4;
  border-bottom-width: 1px;
}
/*左侧信息*/
.checkContent .checkContentItem .checkContentItemLeftTitle {
  height: 30px;
  font-size: 14px;
  font-weight: 400;
  color: #a6aabb;
  line-height: 30px;
  margin-top: 16px;
}
.checkContentItemLeftDescriptionItem {
  display: flex;
  align-items: center;
}
.checkContentItemLeftDescriptionItem .checkContentItemLeftDescriptionItemLabel {
  width: 170px;
  font-size: 14px;
  font-weight: 400;
  color: #202640;
  line-height: 30px;
  flex: none;
}
.checkContentItemLeftDescriptionItem .checkContentItemLeftDescriptionItemValue{
  font-size: 14px;
  color: #333;
}
/*右侧信息*/
.checkContent .checkContentItem .checkContentItemRight {
  margin-top: 16px;
}
.checkContentItemRight .checkContentItemRightResult {
  display: flex;
  align-items: baseline;
}
.checkContentItemRight .icon {
  font-size: 16px;
  margin-right: 6px;
  color: #3cb175;
}
.checkContentItemRight .checkContentItemRightResultDescription {
  height: 30px;
  font-size: 14px;
  font-weight: 400;
  color: #666b80;
  line-height: 30px;
}
.checkContentItemRight .checkContentItemRightSignature {

}
.checkContentItemRight .checkContentItemRightSignature img{
  width: 140px;
  display: block;
  height: auto;
  border: none;
}
.btn-group{
  text-align: center;
}
.return-btn{
  border: 1px solid black;
  background: #fff;
  color: black;
  position: relative;
  width: 160px;
  height: 42px;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
  transition: all .3s;
  margin-right: 10px;
}
.upload-btn{
  margin-left: 10px;
  background-color: #1063f1;
  color: #fff;
  border: 1px solid #1063f1;
  position: relative;
  width: 160px;
  height: 42px;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
  transition: all .3s;
}
</style>
